<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逗游吧后台框架</title>
    <% include ../include/docs-link %>
</head>
<body class="wrapper-body">
<% include ../include/docs-header %>
<div class="wrapper-container">
    <div class="container-fluid">
        <div class="row no-gutter">
            <div class="col-2">
                <% include ../include/docs-nav %>
            </div>
            <div class="col-10">
                <div class="wrapper-content">
                    <article class="wrapper-article">
                        <h1>Pagination 分页</h1>
                        <div class="anchor">
                            <h2 id="概述">概述</h2>
                            <a href="#概述">#</a>
                        </div>
                        <p>当数据量过多时，使用分页分解数据。</p>

                        <div class="anchor">
                            <h2 id="基础用法">基础用法</h2>
                            <a href="#基础用法">#</a>
                        </div>
                        <div class="example">
                            <div class="example-case">
                                <div class="container-fluid">
                                    <div class="row no-gutter">
                                        <div class="col-12">
                                            <nav aria-label="Page navigation" dy8-unit="pagination" data-callback="page" data-total-pages="35" data-visible-pages="5"></nav>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="example-desc">元素添加属性 dy8-unit 值为 pagination 即可生成分页，必填属性 data-total-pages（分页数） 值为 number，选填 data-total-counts（设置分页的总条目数） 与 data-page-size（	设置每一页的条目数） 属性 可忽略 data-total-pages 属性</div>
                            <div class="example-code">
    <pre><code class="html">
    &lt;nav aria-label="Page navigation" dy8-unit="pagination" data-callback="page" data-total-pages="35" data-visible-pages="5"&gt;&lt;/nav&gt;
    </code></pre>
                            </div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>

                        <div class="anchor">
                            <h2 id="间隔分页">间隔分页</h2>
                            <a href="#间隔分页">#</a>
                        </div>
                        <div class="example">
                            <div class="example-case">
                                <div class="container-fluid">
                                    <div class="row no-gutter">
                                        <div class="col-12">
                                            <nav aria-label="Page" class="pagination-container" dy8-unit="pagination" data-pages-type="2" data-jump-pages="true" data-auto-pages="true" data-total-counts="305" data-page-size="10" data-visible-pages="5" data-callback="page">
                                                <span class="pagination-tips">显示总数：</span>
                                                <span class="pagination-tips">共计100条</span>
                                            </nav>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
    <pre><code class="html">
    &lt;nav aria-label="Page" class="pagination-container" dy8-unit="pagination" data-pages-type="2" data-jump-pages="true" data-auto-pages="true" data-total-counts="305" data-page-size="10" data-visible-pages="5" data-callback="page"&gt;
        &lt;span class="pagination-tips"&gt;显示总数：&lt;/span&gt;
        &lt;span class="pagination-tips"&gt;共计100条&lt;/span&gt;
    &lt;/nav&gt;
    </code></pre>
                            </div>
                            <div class="example-desc">
                                根据场景需要，可以添加其他功能模块。
                            </div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>

                        <div class="anchor">
                            <h2 id="参数">参数</h2>
                            <a href="#参数">#</a>
                        </div>
                        <div class="example">
                            <div class="example-case">
                                <table class="table table-hover table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th width="20%">参数</th>
                                            <th width="15%">默认值</th>
                                            <th>说明</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <th>data-total-pages</th>
                                            <td>0</td>
                                            <td>设置分页的总页数</td>
                                        </tr>
                                        <tr>
                                            <th>data-total-counts</th>
                                            <td>0</td>
                                            <td>设置分页的总条目数</td>
                                        </tr>
                                        <tr>
                                            <th>data-page-size</th>
                                            <td>0</td>
                                            <td>设置每一页的条目数<br />
                                                <span style="color: #d14;">注意：</span>要么设置totalPages，要么设置totalCounts + pageSize，否则报错；设置了totalCounts和pageSize后，会自动计算出totalPages。</td>
                                        </tr>
                                        <tr>
                                            <th>data-current-page</th>
                                            <td>1</td>
                                            <td>设置当前的页码</td>
                                        </tr>
                                        <tr>
                                            <th>data-visible-pages</th>
                                            <td>5</td>
                                            <td>设置最多显示的页码数（例如有100也，当前第1页，则显示1 - 5页）</td>
                                        </tr>
                                        <tr>
                                            <th>data-pages-type</th>
                                            <td>1</td>
                                            <td>设置当前分页的风格1为Bootstrap自带分页，2为扩展间隔分页</td>
                                        </tr>
                                        <tr>
                                            <th>data-jump-pages</th>
                                            <td>false</td>
                                            <td>设置是否要生成跳转指定页数功能</td>
                                        </tr>
                                        <tr>
                                            <th>data-auto-pages</th>
                                            <td>false</td>
                                            <td>设置是否要生成每夜分页的个数功能</td>
                                        </tr>
                                        <tr>
                                            <th>data-callback</th>
                                            <td>null</td>
                                            <td>设置回调后的函数名称<br/><span style="color: #d14;">注意：</span>请在页面或脚本中先写好函数名，参数1：num（当前页面），参数2：type（触发类型） </td>
                                        </tr>
                                        <tr>
                                            <th>data-disable-class</th>
                                            <td>'disabled'</td>
                                            <td>设置首页，上一页，下一页，末页的“禁用状态”样式</td>
                                        </tr>
                                        <tr>
                                            <th>data-active-class</th>
                                            <td>'active'</td>
                                            <td>设置当前页码样式</td>
                                        </tr>
                                        <tr>
                                            <th>data-first</th>
                                            <td>bootstrap风格</td>
                                            <td>设置“首页”的Html结构</td>
                                        </tr>
                                        <tr>
                                            <th>data-prev</th>
                                            <td>bootstrap风格</td>
                                            <td>设置“上一页”的Html结构</td>
                                        </tr>
                                        <tr>
                                            <th>data-next</th>
                                            <td>bootstrap风格</td>
                                            <td>设置“下一页”的Html结构</td>
                                        </tr>
                                        <tr>
                                            <th>data-last</th>
                                            <td>bootstrap风格</td>
                                            <td>设置“末页”的Html结构</td>
                                        </tr>
                                        <tr>
                                            <th>data-page</th>
                                            <td>bootstrap风格</td>
                                            <td>设置页码的Html结构,其中可以使用<span style="color: #d14;">{{page}}</span>代表当前页，<span style="color: #d14;">{{totalPages}}</span>代表总页数，<span style="color: #d14;">{{totalCounts}}</span>代表总条目数（例如：上面的“极简风格”的Demo，就是使用了{{占位符}}，并将visiblePages设为1实现的。）<br><span style="color: #d14;">注意</span>：first、prev、next、last。page只要设置一个，其余未设置的会变为空。</td>
                                        </tr>
                                        <tr>
                                            <th>data-wrapper</th>
                                            <td>null</td>
                                            <td>分页结构的Html包裹，例如：&lt;div class="your class"&gt;&lt;/div&gt;，一般不会用到</td>
                                        </tr>
                                        <tr>
                                            <th>data-onPageChange</th>
                                            <td>null</td>
                                            <td>
                                                <span style="color: #d14;">通常调用人员不会用到</span><br />
                                                回调函数，当换页时触发（包括初始化第一页的时候），会传入两个参数：<br>1、“目标页"的页码，Number类型<br>2、触发类型，可能的值：“init”（初始化），“change”（点击分页）
                                            </td>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </div>
</div>
<% include ../include/docs-footer %>
<script>
function page(num,page){
    console.log(num);
    console.log(page);
}
</script>
</body>
</html>